<html><!--this is a comment-->
    <head>
        <title>testing V0.1</title>
        <style type=""text/css">
                body{
                        background-color:#dcd9eb;
                        margin-left:20%;
                        margin-right:20%;
                        border:2px dotted black;
                        padding:10px 10px 10px 10px;
                        font-family:sans-serif;
                    }
        </style>
    </head>
    <body>
        <!--所有的标签集合-->
        <h1> <b>welcome</b> <i>to</i> HTML <sup>up</sup> <sub>down</sub> </h1>
        <h2><i>斜体</i></h2>
        <hr />
        <h3>上标<sup>1</sup></h3>
        <hr />
        <h4>下标<sub>2</sub></h4>
        <hr />
        <hr />
        <h6>换行 <br />换行<sup>4</sup></h6>
        <hr />
        <h7><strong>强调黑体</strong><sup>5</sup></h7>
        <hr />
        <h2><em>斜体强调</em></h2>

        <blockquote cite = "https://gitee.com/ZhiHaoYu0126/html">
            <p>

                <q>this is my personal gitee</q>

            </p>
        </blockquote>

        <p><abbr title="professor">prof</abbr>
            Stefhen Hawking is a physicist
        </p>

        <p><abbr title="National Aeronautics and Space Administration">NASA</abbr>
            make mistake in exploring the moon.(鼠标停留显示全称)
        </p>

        <hr />

        <address>
            <p><a href="mailto:yuzhihao@njnme.cn">yuzhihao@njnme.cn</a></p>
        </address>

        <hr />

        <p>
            This symbol is used to <ins>underline</ins> one word ,and this one is used to <del>delete</del> one word. 
        </p>

        <p>it's not need <s>$19.99</s></p>

        <p>now just $9.99</p>
          
        <p>
            <em>hello my HTML</em>
        </p>


        <img src="YZH.png" title="南京南曼电气有限公司" alt="图片加载失败">
        <img src="2.png"   title=       "截图"        alt="图片加载失败">


        <ol>
            <li>有序列表</li>
            <li>前有序号</li>
            <li>自动排序</li>
            <li>直观清楚</li>
            
        </ol>

        <ul>
            <li>无序列表</li>
            <li>list2.</li>
            <li>list3.</li>
        </ul>

        <dl>
            <dt>english（定义列表）</dt>
            <dd>west world language</dd>

            <dt>chinese</dt>
            <dd>east world language</dd>
        </dl>

        <u1><!--分级菜单-->
            <li>country</li>
            <li>east world
                <ul>
                    <li><del>japan</del></li>
                    <li>china</li>
                    <li>korea</li>
                    <li>vietian</li>
                </ul>
            </li>
        </u1>

        <a href ="https://gitee.com/ZhiHaoYu0126/html">My gitee</a><!--超链接-->
        <a href ="https://www.baidu.com">百度</a>
        <a href ="https://www.google.com">谷歌</a>
        <!--更多用CSS控制图片大小-->
        <p><img src="YZH.png" alt="南京南曼电气有限公司" title="南京南曼电气有限公司" width="400" height="200"  /> <!--图像名称、鼠标悬浮时显示、出错时显示、宽度、高度-->img is on the leftof the text</p>
        <!--left\right用来调节水平值，top\middle\bottom用来调节垂直值-->

        <figure>
        <img src="1.png" alt="截图" title="截图" width="400" height="200" /></p>
        <img src="YZH.png" alt="南京南曼电气有限公司" title="南京南曼电气有限公司" width="400" height="200"  /> <!--图像名称、鼠标悬浮时显示、出错时显示、宽度、高度-->

        <br />
        <figcaption>This is a picture of my computer</figcaption>
        </figure>

        <table> 
            <tr><!--表头-->
                <th scope="col">姓名</th><!--表头加粗-->
                <th scope="col">性别</th><!--col表示列，row表示行-->
                <th scope="col">年龄</th>
            </tr>
            <tr>
                <td scope="col">张三</td><!--元素-->
                <td scope="col">男</td>
                <td colspan="3">20</td><!--普通--><!--colspan="3"表示跨三列-->
                <td rowspan="3">♂</td>
            </tr>
        </table>

        <!--长表格包含表头、表体、表脚，表头和表体分为两部分，表头包含表头单元格，表体包含数据单元格。表脚一般用于显示总计、平均值等信息。-->
        <table>
            <thead>
                <tr>        
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>        
                <tr>        
                    <td>张三 男 18</td>
                    <br />
                    <td>李红 女 32</td>
                    <br />
                    <td>王五 女 20</td>
                    </tr>
                </tbody>

                <tfoot>

                    <tr>        
                        <td>总计</td>
                        <td>男 1 女 1</td>
                        <td>21</td>
                    </tr>
                </tfoot>
        </table>

        <form action="http://www.example.com/profile.php">
            <p>pleaseselect your favorite genre:
                <br />

                <input type="radio" name="genre" value="rock" check="checked"> Rock
                <input type="radio" name="genre" value="pop"> Pop
                <input type="radio" name="genre" value="jazz"> Jazz
                <input type="radio" name="genre" value="metal"> Metal
            </p>

        </form>

        <form action="file://desktop-1ah82is/doc/" method="post">
            <p>please upload your picture:
                <br />  
            </p>
            <input type="file" name="picture" /><br />
            <input type="submit" value="upload" />


        </form>


    </body>
</html>




































